<!--
  用户注册页面
-->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <el-row>
      <el-col :span="8" :push="8">
        <el-form ref="form" :model="user" status-icon :rules="rules" label-width="100px" :label-position="labelPosition">
          <el-form-item label="手机号:" prop="phoneNumber">
            <el-input v-model="user.phoneNumber" placeholder="请输入手机号" autocomplete="off" prefix-icon="el-icon-mobile-phone"></el-input>
          </el-form-item>
          <el-form-item label="密码:" prop="password">
            <el-input v-model="user.password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="repeatpswd">
            <el-input v-model="user.repeatpswd" show-password placeholder="请再次输入密码" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item label="验证码:" prop="code">
            <el-input v-model="user.code" placeholder="请输入验证码" prefix-icon="el-icon-s-comment"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getCode" type="primary" plain :disabled="btnDisabled">{{getCodeText}}</el-button>
            <el-button @click="regist" type="primary" plain>注册</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import instance from "../utils/request";

export default {
  name: "Register",
  data(){
    /*
    表单验证规则数据
     */
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.user.repeatpswd !== '') {
          this.$refs.ruleForm.validateField('repeatpswd');
        }
        callback();
      }
    };
    /*
      表单验证规则数据
    */
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      msg:'用户注册',
      resStatus:'false',
      getCodeText:'获取验证码',
      btnBool:false,
      btnDisabled:false,
      labelPosition:'right',
      user:{
        phoneNumber:'',
        password:'',
        repeatpswd:'',
        code:''
      },
      /*
      表单验证规则
       */
      rules:{
        phoneNumber: [
          {required:true, message:'请输入手机号', trigger: 'blur'},
          {min:11, max:11}
        ],
        password: [
          {validator: validatePass, required:true, trigger: 'blur'},
          {min:6, max:12}
        ],
        repeatpswd: [
          {validator: validatePass2, required:true, trigger:'blur'},
          {min:6, max:12}
        ],
        code:[
          {required:true,trigger:'blur'}
        ]
      }
    }
  },
  methods:{
    regist(){
      if(!this.user.phoneNumber || !this.user.password || !this.user.code){
        alert('请完善注册信息后再试');
        return;
      }
      let _this = this;
      instance.post('/api/worker/register',{
        phoneNumber:_this.user.phoneNumber,
        password:_this.user.password,
        code:_this.user.code
      }).then(function (res) {
        if(res.data.code === 200){
          alert('注册成功！');
          _this.$router.push('Login');  //跳转登录
        }
        else {
          if(res.data.code === 204){
            alert('验证码错误！');
          }
          if(res.data.code === 205){
            alert('此账号已被使用！');
          }
        }
      })
    },
    /*
    验证码获取方法
     */
    getCode(){
      if(!this.user.phoneNumber || !this.user.password){
        alert('请输入手机号再重试');
        return;
      }
      let _this = this;
      instance.get('/api//worker/sendMessage/' + this.user.phoneNumber).then(function (res) {
        if(res.data.code === 200){
          alert('验证码发送成功，五分钟内有效');
          _this.btnBool = true; //按钮显示标志
          _this.resStatus = true; //结果返回标志
          _this.btnDisabled = true; //按钮可单击标志
          let i = 30;     //倒计时时间
          let timer = setInterval(() => {
            _this.getCodeText = i + "s";
            i--;
            if (i < 0) {
              _this.btnDisabled = false;
              _this.btnBool = false;
              _this.getCodeText = "获取验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
        else if(res.data.code === 203 || !_this.resStatus){
          alert('验证码发送失败！');
        }
        else {
          console.log(res.data);
        }
      }).catch(function (err) {
        console.log(err);
      });
    },
  }
}
</script>

<style scoped>

</style>
